<template>
  <div>
    <div class="cmt-wrapper">
      <h4>评论</h4>
      <div class="cmt-input">
        <div class="el_tag_info" v-if="currentReply">
          <el-tag effect="plain" closable @close="handleTag">回复 @{{currentReply.account.nickname}}</el-tag>
        </div>
        <el-input
          class="text"
          type="textarea"
          resize="none"
          placeholder="说点什么吧..."
          v-model="form.content"
          ref="textfocus"
        ></el-input>
      </div>

      <el-row :gutter="20">
        <el-col :span="21">
          <div class="cmt-input-ctrls">
            <div class="cmt-pics">
              <el-upload
                :action="`${$axios.defaults.baseURL}/upload`"
                name="files"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :file-list="filelist"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <div class="right">
            <el-button type="primary" round size="mini" @click="publish">提交</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: ["currentReply"],
  data() {
    return {
      form: {
        post: "",
        // 文章内容
        content: "",
        pics: []
      },
      // 上传图片插件
      dialogImageUrl: "",
      dialogVisible: false,
      filelist: []
    };
  },
  methods: {
    async publish() {
      const token = this.$store.state.user.token;

      if (token) {
        if (this.form.content === "") {
          this.$message.error("评论内容不能为空");
        } else {
          this.form.post = this.$route.query.id;
          const { id } = this.currentReply || {};
          const res = await this.$axios.post(
            "/comments",
            { ...this.form, follow: id },
            {
              headers: {
                Authorization: `Bearer ` + this.$store.state.user.token
              }
            }
          );
          if (res) {
            this.$emit("reloadComments");
            this.handleTag();
          }
          this.filelist = [];
          this.form.post = "";
          this.form.content = "";
          this.form.pics = [];
        }
      } else {
        this.$router.push("/user/login");
      }
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList) {
      this.form.pics.push(...response);
    },
    handleTag() {
      this.$emit("clearReply");
    }
  },
  watch: {
    currentReply() {
      this.$refs.textfocus.focus();
    }
  }
};
</script>

<style lang="less" scoped>
.cmt-wrapper {
  h4 {
    font-weight: normal;
    font-size: 18px;
    margin-bottom: 20px;
  }
  .cmt-input {
    margin-bottom: 10px;
    .text {
      width: 100%;
      // height: 100%;
    }
  }
  .cmt-input-ctrls {
    margin-bottom: 30px;
    /deep/ .el-upload {
      line-height: 100px;
      width: 100px;
      height: 100px;
    }
    /deep/ .el-upload-list__item {
      width: 100px;
      height: 100px;
    }
  }
  .right {
    .btn {
      height: 30px;
      text-align: center;
    }
  }
}
.el_tag_info {
  padding-bottom: 10px;
}
</style>
